<template>
  <div id="list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品评价</span>
      </div>
      <div id="card">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>筛选查询</span>
          </div>
          <div id="input1">
            关键词<el-input class="input" v-model="input" placeholder="商品名称/商品货架"></el-input>
            商品分类 <el-select v-model="value" class="input" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
              </el-option>
            </el-select>
            用户昵称<el-input class="input" v-model="yhnc" placeholder="用户昵称"></el-input>

          </div>
          <div id="anniu1">
            <el-button type="info" plain @click="chongzhi">重置</el-button>
            <el-button type="info" plain>筛选</el-button>
          </div>
        </el-card>
      </div>
      <div id="shuju">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据列表</span>
          </div>
          <div id="card">
            <el-table :data="jiequ" :default-sort="{prop: 'xh', order: 'ascending'}" border height="400" style="width: 100%">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column fixed prop="id" label="序号" width="95">
              </el-table-column>
              <el-table-column prop="spmc" label="商品名称" width="180">
              </el-table-column>
              <el-table-column prop="yhnc" label="用户昵称" width="180">
              </el-table-column>
              <el-table-column prop="sppf" label="评分" width="180">
              </el-table-column>
              <el-table-column sortable prop="spjg" label="商品价格" width="120">
              </el-table-column>
              <el-table-column prop="ipdz" label="IP地址" width="120">
              </el-table-column>
              <el-table-column prop="gwcs" label="购物次数" width="120">
              </el-table-column>
              <el-table-column prop="pjnr" label="评价内容" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope.row)">查看详情</el-button>
                  <el-button type="text" @click="del(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div id="fenye">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" :page-size='5' :current-page.sync="nowPage">
          </el-pagination>
        </div>
      </div>
      <!-- 查看详情 -->
      <div>
        <el-dialog title="商品详情" :visible.sync="CheckDialogVisible" width="50%" :before-close="editClose">
          <!-- 查看详情表-->
          <el-form ref="editTableData" :model="editTableData" label-width="80px">
            <el-form-item prop="spmc" label="商品名称">
              <el-input v-model="editTableData.spmc"></el-input>
            </el-form-item>
            <el-form-item prop="yhnc" label="用户昵称">
              <el-input v-model="editTableData.yhnc"></el-input>
            </el-form-item>
            <el-form-item prop="sppf" label="评分">
              <el-input v-model="editTableData.sppf"></el-input>
            </el-form-item>
            <el-form-item prop="spjg" label="商品价格" width="150">
              <el-input v-model="editTableData.spjg"></el-input>
            </el-form-item>
            <el-form-item prop="ipdz" label="IP地址" width="150">
              <el-input v-model="editTableData.ipdz"></el-input>
            </el-form-item>
            <el-form-item prop="gwzc" label="购物次数" width="200">
              <el-input v-model="editTableData.gwcs"></el-input>
            </el-form-item>
            <el-form-item prop="pjnr" label="评价内容" width="200">
              <el-input v-model="editTableData.pjnr"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editClose(editTableData)">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<style scopd>
.anniu {
  height: 40px;
}
.input {
  width: 200px;
  margin-left: 20px;
  margin-right: 50px;
}
#anniu1 {
  text-align: center;
  margin-top: 40px;
}
#input1 {
  text-align: center;
}
#card {
  margin-top: 20px;
}
#shuju {
  margin-top: 10px;
}
#fenye {
  margin-top: 10px;
  text-align: center;
}
</style>
  <script>
export default {
  data() {
    return {
      input: '',
      yhnc: '',
      input2: '',
      input3: '',
      select: '',
      options: [{
        value: '选项1',
        label: 'A货'
      }, {
        value: '选项2',
        label: 'B货'
      }, {
        value: '选项3',
        label: 'C货'
      },],
      value: '',
      tableData: [],
      //当前页
      nowPage: 1,
      //每页5条
      eachNum: '每页5条',
      CheckDialogVisible: false,//控制弹出框是否打开。
      editTableData: {
        id: '',
        spmc: '',
        yhnc: '',
        sppf: '',
        spjg: '',
        ipdz: '',
        gwzs: '',
        pjnr: '',
      },

    }
  },
  methods: {
    //几条渲染一页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      return this.eachNum = `每页 ${val} 条`
    },
    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

    },
    // 初始化获取所有数据
    getOrdersList() {
      this.$axios({
        url: "/goods/commentgoods",
        method: "get",
      }).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data;
      });
    },
    //重置按钮
    chongzhi() {
      this.input = '';
      this.yhnc = '';
      this.value = '';
    },
    //点击确认，关闭弹出框。并改值
    editClose(data) {
      this.CheckDialogVisible = false;
      console.log(data),
        this.$axios({
          url: "/goods/commentgoods/change",
          method: "post",
          data: data,
        }).then((res) => {
          console.log(res);

        });
      this.getOrdersList()
    },
    //点击查看详情
    handleEdit(data) {
      this.CheckDialogVisible = true;
      console.log(data);
      this.editTableData.id = data.id;
      this.editTableData.spmc = data.spmc;
      this.editTableData.yhnc = data.yhnc;
      this.editTableData.sppf = data.sppf;
      this.editTableData.spjg = data.spjg;
      this.editTableData.ipdz = data.ipdz;
      this.editTableData.gwzs = data.gwzs;
      this.editTableData.pjnr = data.pjnr;

      console.log(this.editTableData);
      // this.eidtTableData = { ...data };
    },
    // 删除数据的方法
    del(data) {
      console.log(data),
        this.$axios({
          url: '/goods/delBanner',
          method: 'post',
          data: data
        }).then(() => {
        }),
        this.getOrdersList()
    },
  },

  created() {
    // this.getUserList();
    this.getOrdersList();
  },
  computed: {
    //截取数据
    jiequ() {
      return this.tableData.slice(
        (this.nowPage - 1) * this.eachNum.replace(/[^0-9]/ig, ""),
        this.nowPage * this.eachNum.replace(/[^0-9]/ig, ""),
      );

    },

  },
}
</script>